<template>
	<view class="content">
		<view class="item" v-for="(item,index) in list" :key="index">
			<!-- 当传入的参数是0为图片，3为视频 -->
			<view class="" v-if="metType != 3">
				<image :src="$imageOss(item.image)" mode="widthFix" class="image" @tap.stop="toDetails(item)"></image>
			</view>
			<image src="@/static/index/video.png" v-if="metType == 3" class="icon" mode="widthFix"
				@tap.stop="toDetails(item)"></image>
			<view class="">
				<video :src="$imageOss(item.file)"  v-if="metType == 3" class="image" :poster="$imageOss(item.image)" style="width: 100%;object-fit: cover;"></video>
				<text>{{item.title}}</text>
				<view class="bottom">
					<view class="">
						{{item.createtime.split(' ')[0]}}
					</view>
					<view class="" style="display: flex;justify-content: space-between;" v-if="metType != 3">
						<u-icon name="eye-fill" color="#BABABA" size="18"></u-icon>
						{{item.read}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				default: [],
				type: Array
			},
			metType: { //媒体类型
				type: Number,
				default: 0,
			},
			isAddress: {
				type: Boolean,
				default: false,
			},
			url: {
				default: '',
				type: String
			}
		},
		data() {
			return {

			};
		},
		onShow() {

		},
		methods: {
			toDetails(e) {
				if (this.metType == 3) {
					uni.navigateTo({
						url: '/pages/home/webview/webview?url=' + e.link
					})
				} else {
					uni.navigateTo({
						url: `${this.url}?id=${e.id}&&type=${this.metType}`
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		font-size: 28rpx;
		flex-wrap: wrap;
		justify-content: space-between;

		.item {
			width: 48%;
			display: flex;
			flex-direction: column;
			position: relative;
			margin: 10rpx 0;

			.bottom {
				display: flex;
				justify-content: space-between;
				color: #BABABA;
				font-size: 26rpx;
				height: 60rpx;
				line-height: 60rpx;
			}

			.icon {
				width: 32rpx !important;
				height: 32rpx !important;
				position: absolute;
				top: 22%;
				left: 45%;
			}

			.image {
				width: 100%;
				margin-bottom: 12rpx;
				border-radius: 20rpx;
				height: 193rpx !important;
				// .my-video{
				//   width: 100%;
				//   object-fit: cover;
				// }

			}
		}
	}
</style>